<template>
  <PageContainer title="价格管理">
    <!-- 搜索筛选区域 -->
    <SearchForm v-model="searchForm" @search="handleSearch" @reset="handleReset">
      <el-form-item label="关键词搜索">
        <el-input
          v-model="searchForm.keyword"
          placeholder="请输入回收类型或备注"
          clearable
        />
      </el-form-item>
      <el-form-item label="回收类型">
        <el-select
          v-model="searchForm.wasteType"
          placeholder="请选择回收类型"
          clearable
        >
          <el-option label="纸壳类" value="paper" />
          <el-option label="塑料类" value="plastic" />
          <el-option label="金属类" value="metal" />
          <el-option label="玻璃类" value="glass" />
          <el-option label="织物类" value="textile" />
          <el-option label="混合类" value="mixed" />
        </el-select>
      </el-form-item>
      <el-form-item label="价格状态">
        <el-select
          v-model="searchForm.status"
          placeholder="请选择价格状态"
          clearable
        >
          <el-option label="生效中" value="active" />
          <el-option label="未生效" value="inactive" />
          <el-option label="已过期" value="expired" />
        </el-select>
      </el-form-item>
      <el-form-item label="生效时间">
        <el-date-picker
          v-model="searchForm.dateRange"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
        />
      </el-form-item>
    </SearchForm>



    <!-- 操作按钮区域 -->
    <div class="action-bar">
      <div class="action-left">
        <el-button
          type="primary"
          @click="handleCreatePrice"
        >
          <el-icon><Plus /></el-icon>
          新建价格
        </el-button>
        <el-button
          type="success"
          :disabled="!selectedRows.length"
          @click="handleBatchBind"
        >
          <el-icon><Connection /></el-icon>
          批量绑定
        </el-button>
        <el-button
          type="warning"
          :disabled="!selectedRows.length"
          @click="handleBatchDisable"
        >
          <el-icon><Close /></el-icon>
          批量停用
        </el-button>
        <el-button
          type="info"
          @click="handleExport"
        >
          <el-icon><Download /></el-icon>
          导出价格
        </el-button>
        <el-button
          type="primary"
          @click="handlePriceHistory"
        >
          <el-icon><Histogram /></el-icon>
          价格历史
        </el-button>
      </div>
      <div class="action-right">
        <el-button
          type="info"
          @click="loadPriceList"
        >
          <el-icon><Refresh /></el-icon>
          刷新
        </el-button>
      </div>
    </div>

    <!-- 价格列表表格 -->
    <DataTable
      :data="priceList"
      :loading="loading"
      :pagination="pagination"
      @page-change="handlePageChange"
      @size-change="handleSizeChange"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="id" label="价格ID" width="100" />
      <el-table-column label="回收类型" width="120">
        <template #default="{ row }">
          <el-tag :type="getWasteTypeTag(row.wasteType)">
            {{ getWasteTypeText(row.wasteType) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="价格" width="120" sortable>
        <template #default="{ row }">
          <span class="price-amount">¥{{ row.price }}/{{ row.unit }}</span>
        </template>
      </el-table-column>
      <el-table-column label="绑定设备" width="200">
        <template #default="{ row }">
          <div class="device-list">
            <el-tag
              v-for="device in row.deviceNames.slice(0, 3)"
              :key="device"
              size="small"
              style="margin-right: 4px; margin-bottom: 4px;"
            >
              {{ device }}
            </el-tag>
            <el-tag v-if="row.deviceNames.length > 3" size="small">
              +{{ row.deviceNames.length - 3 }}
            </el-tag>
            <span v-if="row.deviceNames.length === 0" class="text-muted">未绑定设备</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="100">
        <template #default="{ row }">
          <el-tag :type="getStatusTag(row.status)">
            {{ getStatusText(row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="生效时间" width="180" sortable>
        <template #default="{ row }">
          <div>{{ formatDateTime(row.effectiveDate) }}</div>
          <div v-if="row.expiredDate" class="expired-date">
            至 {{ formatDateTime(row.expiredDate) }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="备注" min-width="150">
        <template #default="{ row }">
          <span v-if="row.remark" class="remark-text">{{ row.remark }}</span>
          <span v-else class="text-muted">-</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" width="180" sortable>
        <template #default="{ row }">
          {{ formatDateTime(row.createdAt) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200" fixed="right">
        <template #default="{ row }">
          <el-button
            type="primary"
            size="small"
            @click="handleEditPrice(row)"
          >
            编辑
          </el-button>
          <el-button
            type="success"
            size="small"
            @click="handleBindDevice(row)"
          >
            绑定
          </el-button>
          <el-dropdown @command="(command: string) => handleMoreAction(command, row)">
            <el-button type="text" size="small">
              更多<el-icon><ArrowDown /></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="view-history">价格历史</el-dropdown-item>
                <el-dropdown-item command="copy-price">复制价格</el-dropdown-item>
                <el-dropdown-item
                  command="disable"
                  :disabled="row.status !== 'active'"
                  divided
                >
                  {{ row.status === 'active' ? '停用' : '启用' }}
                </el-dropdown-item>
                <el-dropdown-item
                  command="delete"
                  :disabled="row.deviceIds.length > 0"
                  style="color: #F56C6C;"
                >
                  删除
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </el-table-column>
    </DataTable>

    <!-- 价格编辑对话框 -->
    <el-dialog
      v-model="priceDialogVisible"
      :title="isEdit ? '编辑价格' : '新建价格'"
      width="600px"
      :close-on-click-modal="false"
    >
      <el-form
        ref="priceFormRef"
        :model="priceForm"
        :rules="priceRules"
        label-width="100px"
      >
        <el-form-item label="回收类型" prop="wasteType">
          <el-select
            v-model="priceForm.wasteType"
            placeholder="请选择回收类型"
          >
            <el-option label="纸壳类" value="paper" />
            <el-option label="塑料类" value="plastic" />
            <el-option label="金属类" value="metal" />
            <el-option label="玻璃类" value="glass" />
            <el-option label="织物类" value="textile" />
            <el-option label="混合类" value="mixed" />
          </el-select>
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input-number
            v-model="priceForm.price"
            :min="0.01"
            :max="100"
            :precision="2"
            placeholder="请输入价格"
            style="width: 200px"
          />
          <span style="margin-left: 8px; color: #909399">元/{{ priceForm.unit }}</span>
        </el-form-item>
        <el-form-item label="单位" prop="unit">
          <el-select
            v-model="priceForm.unit"
            placeholder="请选择单位"
          >
            <el-option label="千克" value="kg" />
            <el-option label="克" value="g" />
            <el-option label="斤" value="jin" />
          </el-select>
        </el-form-item>
        <el-form-item label="生效时间" prop="effectiveDate">
          <el-date-picker
            v-model="priceForm.effectiveDate"
            type="datetime"
            placeholder="选择生效时间"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="过期时间">
          <el-date-picker
            v-model="priceForm.expiredDate"
            type="datetime"
            placeholder="选择过期时间（可选）"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="绑定设备">
          <el-select
            v-model="priceForm.deviceIds"
            multiple
            placeholder="请选择要绑定的设备"
            style="width: 100%"
          >
            <el-option
              v-for="device in deviceOptions"
              :key="device.id"
              :label="`${device.name} (${device.code})`"
              :value="device.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input
            v-model="priceForm.remark"
            type="textarea"
            :rows="3"
            placeholder="请输入备注信息"
            maxlength="200"
            show-word-limit
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="priceDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handlePriceSubmit" :loading="submitting">
          {{ isEdit ? '保存修改' : '创建价格' }}
        </el-button>
      </template>
    </el-dialog>

    <!-- 设备绑定对话框 -->
    <el-dialog
      v-model="bindDialogVisible"
      title="绑定设备"
      width="700px"
      :close-on-click-modal="false"
    >
      <div v-if="currentPrice" class="bind-device-content">
        <div class="bind-info">
          <h4>当前价格规则</h4>
          <p>回收类型：{{ getWasteTypeText(currentPrice.wasteType) }}</p>
          <p>价格：¥{{ currentPrice.price }}/{{ currentPrice.unit }}</p>
        </div>

        <el-divider />

        <div class="device-selection">
          <h4>选择要绑定的设备</h4>
          <el-transfer
            v-model="bindForm.deviceIds"
            :data="deviceTransferData"
            :titles="['可用设备', '已绑定设备']"
            filterable
            style="margin-top: 16px;"
          />
        </div>
      </div>
      <template #footer>
        <el-button @click="bindDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleBindSubmit" :loading="submitting">
          确认绑定
        </el-button>
      </template>
    </el-dialog>

    <!-- 价格历史对话框 -->
    <el-dialog
      v-model="historyDialogVisible"
      title="价格历史记录"
      width="80%"
    >
      <div v-if="currentPrice" class="price-history-content">
        <el-table :data="priceHistoryList" style="width: 100%">
          <el-table-column prop="id" label="记录ID" width="100" />
          <el-table-column label="价格变化" width="150">
            <template #default="{ row }">
              <span class="old-price">¥{{ row.oldPrice }}</span>
              <el-icon><ArrowRight /></el-icon>
              <span class="new-price">¥{{ row.newPrice }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="operator" label="操作人" width="120" />
          <el-table-column prop="reason" label="变更原因" min-width="200" />
          <el-table-column prop="createdAt" label="变更时间" width="180" />
        </el-table>
      </div>
    </el-dialog>
  </PageContainer>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
import {
  PriceTag,
  Box,
  Coin,
  Document,
  Plus,
  Connection,
  Close,
  Download,
  Histogram,
  Refresh,
  ArrowDown,
  ArrowRight
} from '@element-plus/icons-vue'
import PageContainer from '@/components/PageContainer.vue'
import SearchForm from '@/components/SearchForm.vue'
import DataTable from '@/components/DataTable.vue'
import StatCard from '@/components/StatCard.vue'
import { formatDateTime } from '@/utils'
import type { Price, PriceQuery, PriceForm, BindDeviceForm, PriceStats, PriceHistory } from '@/types/price'

const loading = ref(false)
const submitting = ref(false)
const priceDialogVisible = ref(false)
const bindDialogVisible = ref(false)
const historyDialogVisible = ref(false)
const isEdit = ref(false)
const currentPrice = ref<Price | null>(null)
const selectedRows = ref<Price[]>([])
const priceFormRef = ref<FormInstance>()

// 搜索表单
const searchForm = reactive<PriceQuery>({
  keyword: '',
  wasteType: undefined,
  status: undefined,
  dateRange: [],
  page: 1,
  size: 20
})

// 分页信息
const pagination = reactive({
  page: 1,
  size: 20,
  total: 0
})

// 价格统计
const priceStats = reactive<PriceStats>({
  activePrices: 156,
  totalDevices: 289,
  averagePrice: 0.68,
  priceTrend: '+3.2%'
})

// 价格列表
const priceList = ref<Price[]>([])

// 设备选项
const deviceOptions = ref<any[]>([])

// 价格表单
const priceForm = reactive<PriceForm>({
  wasteType: 'paper',
  price: 0.6,
  unit: 'kg',
  deviceIds: [],
  effectiveDate: '',
  expiredDate: '',
  remark: ''
})

// 绑定表单
const bindForm = reactive<BindDeviceForm>({
  priceId: 0,
  deviceIds: []
})

// 价格历史列表
const priceHistoryList = ref<PriceHistory[]>([])

// 设备传输数据
const deviceTransferData = computed(() => {
  return deviceOptions.value.map(device => ({
    key: device.id,
    label: `${device.name} (${device.code}) - ${device.location}`
  }))
})

// 表单验证规则
const priceRules: FormRules = {
  wasteType: [
    { required: true, message: '请选择回收类型', trigger: 'change' }
  ],
  price: [
    { required: true, message: '请输入价格', trigger: 'blur' },
    { type: 'number', min: 0.01, max: 100, message: '价格范围在 0.01 到 100 元', trigger: 'blur' }
  ],
  unit: [
    { required: true, message: '请选择单位', trigger: 'change' }
  ],
  effectiveDate: [
    { required: true, message: '请选择生效时间', trigger: 'change' }
  ]
}

// 获取回收类型标签
const getWasteTypeTag = (wasteType: string) => {
  switch (wasteType) {
    case 'paper':
      return 'primary'
    case 'plastic':
      return 'success'
    case 'metal':
      return 'warning'
    case 'glass':
      return 'info'
    case 'textile':
      return 'danger'
    case 'mixed':
      return ''
    default:
      return 'info'
  }
}

// 获取回收类型文本
const getWasteTypeText = (wasteType: string) => {
  switch (wasteType) {
    case 'paper':
      return '纸壳类'
    case 'plastic':
      return '塑料类'
    case 'metal':
      return '金属类'
    case 'glass':
      return '玻璃类'
    case 'textile':
      return '织物类'
    case 'mixed':
      return '混合类'
    default:
      return '未知类型'
  }
}

// 获取状态标签
const getStatusTag = (status: string) => {
  switch (status) {
    case 'active':
      return 'success'
    case 'inactive':
      return 'warning'
    case 'expired':
      return 'danger'
    default:
      return 'info'
  }
}

// 获取状态文本
const getStatusText = (status: string) => {
  switch (status) {
    case 'active':
      return '生效中'
    case 'inactive':
      return '未生效'
    case 'expired':
      return '已过期'
    default:
      return '未知状态'
  }
}

// 加载价格列表
const loadPriceList = async () => {
  loading.value = true
  try {
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 500))

    // 演示数据
    priceList.value = [
      {
        id: 1,
        wasteType: 'paper',
        price: 0.6,
        unit: 'kg',
        deviceIds: [1, 2, 3],
        deviceNames: ['智能回收箱001', '智能回收箱002', '智能回收箱003'],
        status: 'active',
        effectiveDate: '2024-01-01 00:00:00',
        expiredDate: '2024-12-31 23:59:59',
        remark: '纸壳类回收价格',
        createdAt: '2024-01-01 10:00:00',
        updatedAt: '2024-01-01 10:00:00'
      },
      {
        id: 2,
        wasteType: 'plastic',
        price: 0.8,
        unit: 'kg',
        deviceIds: [4, 5],
        deviceNames: ['智能回收箱004', '智能回收箱005'],
        status: 'active',
        effectiveDate: '2024-01-01 00:00:00',
        remark: '塑料类回收价格',
        createdAt: '2024-01-01 10:00:00',
        updatedAt: '2024-01-01 10:00:00'
      },
      {
        id: 3,
        wasteType: 'metal',
        price: 1.2,
        unit: 'kg',
        deviceIds: [],
        deviceNames: [],
        status: 'inactive',
        effectiveDate: '2024-02-01 00:00:00',
        remark: '金属类回收价格',
        createdAt: '2024-01-15 14:30:00',
        updatedAt: '2024-01-15 14:30:00'
      },
      {
        id: 4,
        wasteType: 'textile',
        price: 0.4,
        unit: 'kg',
        deviceIds: [1, 2, 3, 4, 5],
        deviceNames: ['智能回收箱001', '智能回收箱002', '智能回收箱003', '智能回收箱004', '智能回收箱005'],
        status: 'active',
        effectiveDate: '2024-01-01 00:00:00',
        remark: '织物类回收价格',
        createdAt: '2024-01-01 10:00:00',
        updatedAt: '2024-01-01 10:00:00'
      },
      {
        id: 5,
        wasteType: 'mixed',
        price: 0.5,
        unit: 'kg',
        deviceIds: [6, 7],
        deviceNames: ['智能回收箱006', '智能回收箱007'],
        status: 'active',
        effectiveDate: '2024-01-01 00:00:00',
        remark: '混合类回收价格',
        createdAt: '2024-01-01 10:00:00',
        updatedAt: '2024-01-01 10:00:00'
      }
    ]

    pagination.total = priceList.value.length
  } catch (error) {
    ElMessage.error('加载价格列表失败')
  } finally {
    loading.value = false
  }
}

// 加载设备列表
const loadDeviceList = async () => {
  try {
    // 模拟设备数据
    deviceOptions.value = [
      { id: 1, name: '智能回收箱001', code: 'DL001', location: 'A区1号楼' },
      { id: 2, name: '智能回收箱002', code: 'DL002', location: 'A区2号楼' },
      { id: 3, name: '智能回收箱003', code: 'DL003', location: 'B区1号楼' },
      { id: 4, name: '智能回收箱004', code: 'DL004', location: 'B区2号楼' },
      { id: 5, name: '智能回收箱005', code: 'DL005', location: 'C区1号楼' },
      { id: 6, name: '智能回收箱006', code: 'DL006', location: 'C区2号楼' },
      { id: 7, name: '智能回收箱007', code: 'DL007', location: 'D区1号楼' }
    ]
  } catch (error) {
    ElMessage.error('加载设备列表失败')
  }
}

// 搜索处理
const handleSearch = () => {
  pagination.page = 1
  loadPriceList()
}

// 重置处理
const handleReset = () => {
  Object.assign(searchForm, {
    keyword: '',
    wasteType: '',
    status: '',
    dateRange: []
  })
  pagination.page = 1
  loadPriceList()
}

// 分页处理
const handlePageChange = (page: number) => {
  pagination.page = page
  loadPriceList()
}

const handleSizeChange = (size: number) => {
  pagination.size = size
  pagination.page = 1
  loadPriceList()
}

// 选择处理
const handleSelectionChange = (selection: Price[]) => {
  selectedRows.value = selection
}

// 新建价格
const handleCreatePrice = () => {
  isEdit.value = false
  Object.assign(priceForm, {
    wasteType: 'paper',
    price: 0.6,
    unit: 'kg',
    deviceIds: [],
    effectiveDate: '',
    expiredDate: '',
    remark: ''
  })
  priceDialogVisible.value = true
}

// 编辑价格
const handleEditPrice = (row: Price) => {
  isEdit.value = true
  currentPrice.value = row
  Object.assign(priceForm, {
    wasteType: row.wasteType,
    price: row.price,
    unit: row.unit,
    deviceIds: row.deviceIds,
    effectiveDate: row.effectiveDate,
    expiredDate: row.expiredDate,
    remark: row.remark
  })
  priceDialogVisible.value = true
}

// 绑定设备
const handleBindDevice = (row: Price) => {
  currentPrice.value = row
  bindForm.priceId = row.id
  bindForm.deviceIds = [...row.deviceIds]
  bindDialogVisible.value = true
}

// 价格提交
const handlePriceSubmit = async () => {
  if (!priceFormRef.value) return

  try {
    await priceFormRef.value.validate()
    submitting.value = true

    if (isEdit.value) {
      // 调用编辑价格API
      ElMessage.success('价格修改成功')
    } else {
      // 调用新建价格API
      ElMessage.success('价格创建成功')
    }

    priceDialogVisible.value = false
    loadPriceList()
  } catch (error) {
    ElMessage.error('操作失败')
  } finally {
    submitting.value = false
  }
}

// 绑定提交
const handleBindSubmit = async () => {
  try {
    // 调用绑定设备API
    ElMessage.success('设备绑定成功')
    bindDialogVisible.value = false
    loadPriceList()
  } catch (error) {
    ElMessage.error('绑定失败')
  }
}

// 批量绑定
const handleBatchBind = () => {
  ElMessage.info('批量绑定功能开发中...')
}

// 批量停用
const handleBatchDisable = async () => {
  try {
    await ElMessageBox.confirm(
      `确定要停用选中的 ${selectedRows.value.length} 个价格规则吗？`,
      '批量停用',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )

    // 调用批量停用API
    ElMessage.success('批量停用成功')
    loadPriceList()
  } catch (error) {
    // 用户取消
  }
}

// 导出价格
const handleExport = () => {
  ElMessage.info('导出价格功能开发中...')
}

// 价格历史
const handlePriceHistory = () => {
  // 模拟价格历史数据
  priceHistoryList.value = [
    {
      id: 1,
      priceId: 1,
      oldPrice: 0.5,
      newPrice: 0.6,
      operator: '管理员',
      reason: '市场价格调整',
      createdAt: '2024-01-01 10:00:00'
    },
    {
      id: 2,
      priceId: 2,
      oldPrice: 0.7,
      newPrice: 0.8,
      operator: '管理员',
      reason: '塑料回收成本上涨',
      createdAt: '2024-01-01 10:00:00'
    }
  ]
  historyDialogVisible.value = true
}

// 更多操作
const handleMoreAction = (command: string, row: Price) => {
  switch (command) {
    case 'view-history':
      currentPrice.value = row
      handlePriceHistory()
      break
    case 'copy-price':
      ElMessage.info('复制价格功能开发中...')
      break
    case 'disable':
      handleToggleStatus(row)
      break
    case 'delete':
      handleDeletePrice(row)
      break
  }
}

// 切换状态
const handleToggleStatus = async (row: Price) => {
  try {
    const action = row.status === 'active' ? '停用' : '启用'
    await ElMessageBox.confirm(
      `确定要${action}这个价格规则吗？`,
      `${action}价格`,
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )

    // 调用切换状态API
    ElMessage.success(`${action}成功`)
    loadPriceList()
  } catch (error) {
    // 用户取消
  }
}

// 删除价格
const handleDeletePrice = async (row: Price) => {
  try {
    await ElMessageBox.confirm(
      '确定要删除这个价格规则吗？',
      '删除价格',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )

    // 调用删除价格API
    ElMessage.success('删除成功')
    loadPriceList()
  } catch (error) {
    // 用户取消
  }
}

onMounted(() => {
  loadPriceList()
  loadDeviceList()
})
</script>

<style lang="scss" scoped>
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 16px 20px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);

  .action-left,
  .action-right {
    display: flex;
    gap: 12px;
  }
}

.price-amount {
  color: #E6A23C;
  font-weight: 600;
}

.device-list {
  .el-tag {
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.text-muted {
  color: #909399;
}

.remark-text {
  color: #606266;
  line-height: 1.4;
}

.expired-date {
  font-size: 12px;
  color: #909399;
  margin-top: 4px;
}

.bind-device-content {
  .bind-info {
    h4 {
      margin-bottom: 12px;
      color: #303133;
    }

    p {
      margin-bottom: 8px;
      color: #606266;
    }
  }

  .device-selection {
    h4 {
      margin-bottom: 16px;
      color: #303133;
    }
  }
}

.price-history-content {
  .old-price {
    color: #F56C6C;
    text-decoration: line-through;
    margin-right: 8px;
  }

  .new-price {
    color: #67C23A;
    font-weight: 600;
    margin-left: 8px;
  }
}

@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .action-bar {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;

    .action-left,
    .action-right {
      justify-content: center;
    }
  }
}
</style>
